<template>
  <div class="add-area">
    <div class="text">
      <el-icon><Tickets /></el-icon><span>数据列表</span>
    </div>
    <el-button @click="addProductCate">添加</el-button>
  </div>
  <el-table
    :data="ProductCategoryList"
    border
    table-layout="auto"
    cell-class-name="align-c"
  >
    <el-table-column
      prop="id"
      label="编号"
      width="100"
      hight="180"
      align="center"
    />
    <el-table-column prop="name" label="分类名称"> </el-table-column>
    <el-table-column prop="level" label="级别">
      <template #default="{ row }">
        <span>{{ row.level === 0 ? "一级" : "二级" }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="productCount" label="商品数量"></el-table-column>
    <el-table-column prop="productUnit" label="数量单位"></el-table-column>
    <el-table-column prop="navStatus" label="导航栏">
      <template #default="{ row }">
        <el-switch
          v-model="row.navStatus"
          :active-value="1"
          :inactive-value="0"
          @change="switchNavStatus(row)"
        />
      </template> </el-table-column
    ><el-table-column prop="showStatus" label="是否显示">
      <template #default="{ row }">
        <el-switch
          v-model="row.showStatus"
          :active-value="1"
          :inactive-value="0"
          @change="switchShowStatus(row)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序"></el-table-column>
    <el-table-column prop="description" label="设置" width="220">
      <template #default="{ row }">
                    <el-button @click="checkLower(row.id)" :disabled="route.query.parentId ? true : false">查看下级</el-button>
                    <el-button>转移商品</el-button>
                </template>
    </el-table-column>
    <el-table-column prop="description" label="操作" width="200">
      <template #default="{ row }">
                    <el-button @click="editProductCate(row.id)" v-permission="'updateProductCate'">编辑</el-button>
                    <el-button type="danger" @click="delProductCate(row.id)">删除</el-button>
                </template>
    </el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <div class="page">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[5,10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="queryProductList"
        @current-change="queryProductList"
      />
    </div>
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { Tickets } from "@element-plus/icons-vue";
import { getProductCategoryListAPI ,deleteAttrApi,productCategoryShowStatusApi,productCategoryNavStatusApi} from "./api";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElMessage,ElMessageBox} from 'element-plus';
import { reactive, ref,watch } from "vue";
import { useRoute,useRouter } from "vue-router";
const router = useRouter();
const route = useRoute()
const urlId = ref<any>(route.query.parentId)


const queryParams = reactive<IProductCategoryListParams>({
  parentId: 0,
  pageNum: 1,
  pageSize: 5,
});
const total = ref(0);
const ProductCategoryList = ref<IProductCategoryModel[]>([]);


  // 添加商品分类
const addProductCate = () => {
    router.push('/pms/addProductCate')
}

// 编辑商品分类
const editProductCate = (id: number) => {
    router.push(`/pms/updateProductCate?id=${id}`)
}
// 删除商品分类
const delProductCate = (id: number) => {
  ElMessageBox.confirm('是否要删除该分类?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteAttrApi(id).then((res) => {
      if (res.code === 200) {
        ElMessage.success('删除成功');
        getProductCategoryList();
      }
    })
  }).catch(() => { })
}

// 修改商品分类是否显示状态
const switchShowStatus = (row: IProductCategoryModel) => {
  productCategoryShowStatusApi(row.id!, row.showStatus)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功！");
      } else {
        row.showStatus = row.showStatus === 1 ? 0 : 1;
      }
    })
    .catch(() => {
      row.showStatus = row.showStatus === 1 ? 0 : 1;
    });
};
// 修改商品分类导航栏显示状态
const switchNavStatus = (row: IProductCategoryModel) => {
  productCategoryNavStatusApi(row.id!, row.navStatus)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功！");
      } else {
        row.navStatus = row.navStatus === 1 ? 0 : 1;
      }
    })
    .catch(() => {
      row.navStatus = row.navStatus === 1 ? 0 : 1;
    });
};



// 查看下级
const checkLower = (parentId: number) => {
    router.push(`/pms/productCate?parentId=${parentId}`)

}

watch(() => route.query.parentId, () => {
    if (route.query.parentId) {
        console.log(route.query.parentId);
        queryParams.parentId = parseInt(route.query.parentId as string)
    } else {
      queryParams.parentId = 0
    }
    getProductCategoryList()
})

const getProductCategoryList = () => {
  getProductCategoryListAPI(queryParams).then((res) => {
    console.log("数据:", res.data);
    if (res.code === 200) {
      ProductCategoryList.value = res.data.list;
      total.value = res.data.total;
    }
  });
};
const queryProductList = () => {
  getProductCategoryList();
};

getProductCategoryList();
</script>
<style lang="less" scoped>
:deep(.align-c),
:deep(.cell) {
  text-align: center !important;
}

.add-area {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  .text {
    display: flex;
    align-items: center;
    span {
      padding-left: 10px;
    }
  }
}
.page {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
